<template>
  <div>
    <h3>美食列表</h3>
    <div class="food">
        <div class="item" v-for="(item,k) in list" :key="'food_'+k">
            <!-- {{ item }} -->
            <img v-bind:src="item.pic" alt="">
            <h4>{{item.title}}</h4>
            <p>{{item.author}}</p>
        </div>

        <!-- <div class="item">
            <img src="https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449" alt="">
            <h4>南瓜土豆麦饼</h4>
            <p>清水淡竹</p>
        </div>
        <div class="item">
            <img src="https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449" alt="">
            <h4>南瓜土豆麦饼</h4>
            <p>清水淡竹</p>
        </div>
        <div class="item">
            <img src="https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449" alt="">
            <h4>南瓜土豆麦饼</h4>
            <p>清水淡竹</p>
        </div>
        <div class="item">
            <img src="https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449" alt="">
            <h4>南瓜土豆麦饼</h4>
            <p>清水淡竹</p>
        </div> -->
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            // 是产品列表，所以用的是数组
            list:[
                // 因为每个产品有很多信息，所以用对象(字面量对象)表示
                {
                    pic:"https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449",
                    title:"南瓜土豆麦饼",
                    author:"清水淡竹"
                },
                {
                    pic:"https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449",
                    title:"南瓜土豆麦饼",
                    author:"清水淡竹2"
                },
                {
                    pic:"https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449",
                    title:"南瓜土豆麦饼",
                    author:"清水淡竹3"
                },
                {
                    pic:"https://img0.baidu.com/it/u=3862303265,3497129469&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=449",
                    title:"南瓜土豆麦饼",
                    author:"清水淡竹4"
                }
            ]
        }
    }
}
</script>

<style>
.food {
    width: 1200px;
    margin:0 auto;

    display: flex;
    justify-content: space-between;
}

.food .item img{
    width: 300px;
}
</style>